<template>
  <view class="container">
    <image class="bg-image" mode="aspectFill" src="/static/img/user-bg.png"/>
  </view>
  <view>
    <view class="flex-column-center" style="padding:100rpx 40rpx 40rpx">
      <!--  头像-->
      <view style="position: relative">
        <up-avatar src="https://picsum.photos/200" size="60"></up-avatar>
        <image src="@/static/icon/vip/user-level-1.png"
               style="width: 140rpx;height: 55rpx;position:absolute;left: -20rpx;bottom: -20rpx"/>
      </view>
      <view style="color: #fff; font-size: 32rpx;margin-top: 20rpx">测试人员</view>
      <view style="padding-top: 20rpx" class="flex">
        <view class="user_tag">#雪月夜</view>
        <view class="user_tag">#雪月夜</view>
        <view class="user_tag">#雪月夜</view>
      </view>
    </view>
    <vip-card></vip-card>
    <a-card>
      <up-row gutter="0" class="u-f-sl">
        <up-col span="6">
          <view class="text-center  u-c-c u-f-sxl">10</view>
          <view class="text-center p-c-15">帖子</view>
        </up-col>
        <up-col span="6" @click="toPath('/order/index/index')">
          <view class="text-center u-c-c u-f-sxl">2</view>
          <view class="text-center p-c-15">订单</view>
        </up-col>
      </up-row>
    </a-card>
    <a-card>
      <view style="display: grid;grid-template-columns: repeat(4, 1fr);">
        <view v-for="item of operArr" :key="item.name" style="padding:15rpx 0;">
          <view class="open-menu" @click="toPath(item.path)">
            <view>
              <image :src="item.icon" style="width: 50rpx;height: 50rpx"/>
            </view>
            <view class="u-f-sl p-c-15">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </a-card>
    <a-card>
      <up-row gutter="10">
        <up-col span="3" v-for="item of basicArr" :key="item.name" style="padding:15rpx 0;">
          <view class="open-menu" @click="toPath(item.path)">
            <view>
              <image :src="item.icon" style="width: 50rpx;height: 50rpx"/>
            </view>
            <view class="u-f-sl p-c-15">{{ item.name }}</view>
          </view>
        </up-col>
      </up-row>
    </a-card>
  </view>
  <a-menu/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {toPath} from "@/util/router/router";
import {createTemplate} from "@/util/template/DefineTemplate";
import VipCard from "@/user/components/VipCard.vue";
import {basicConfig, upgradeConfig} from '@/util/options/system';
import {onLoad} from '@dcloudio/uni-app'


const {DefineTmp, UseTmp} = createTemplate()
const operArr = ref([])
const basicArr = ref([])


onLoad(() => {
  operArr.value = upgradeConfig.map(item => ({
    ...item,
    icon: `/static/icon/oper/${item.iconKey}.png`
  }))
  basicArr.value = basicConfig.map(item => ({
    ...item,
    icon: `/static/icon/oper/${item.iconKey}.png`
  }))
})
</script>
<style scoped lang="scss">
@import "@/static/css/index.css";
@function random-light-color() {
  // 色相(0-360)，饱和度(50-100%)，亮度(70-100%)
  @return hsl(random(360), 50% + random(50), 70% + random(30));
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background: #4b4b4b;
}

.bg-image {
  width: 100%;
  height: 100%;
}

.open-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
}

:deep(.u-avatar__level) {
  border: none;
  right: 37%;
  bottom: -14%;
}

.user_tag {
  padding: 6rpx 10rpx;
  font-size: 20rpx;
  color: random-light-color();
  border: 1rpx solid random-light-color();
  margin: 0 2rpx;
  border-radius: 100rpx;
}

</style>
